<template>
    <view class="jxt-container">
        <scroll-view 
            class="list" 
            :scroll-y="true" 
            :refresher-enabled="true" 
            :refresher-triggered="refresherTriggered" 
            @refresherrefresh="onRefresherRefresh" 
            refresher-background="#f5f5f5"
        >
            <view class="sh-box" v-if="shStatus == 0">
                <view class="tip">信息已提交，耐心等待后台审核~</view>
                <view class="look-btn" @click="lookDetail">点击查看报名信息</view>
            </view>
            <view class="sh-box" v-if="shStatus == 1">
                <view class="tip">您已成功入驻~</view>
                <view class="look-btn" @click="lookDetail">点击查看报名信息</view>
            </view>
            <view v-else>
                <view class="form-card">
                    <!-- 技能选择 -->
                    <view class="form-item">
                        <text class="label">技能选择</text>
                        <view class="value" @click="showSkillPicker = true">
                            <text class="placeholder">{{ selectedSkill || '请选择' }}</text>
                            <u-icon name="arrow-right" size="14" color="#999" />
                        </view>
                    </view>

                    <!-- 姓名 -->
                    <view class="form-item">
                        <text class="label">姓名</text>
                        <input class="input" v-model="formData.real_name" placeholder="请输入真实姓名" />
                    </view>

                    <!-- 年龄 -->
                    <view class="form-item">
                        <text class="label">年龄</text>
                        <input class="input" v-model="formData.age" placeholder="请输入年龄" type="number" />
                    </view>

                    <!-- 性别 -->
                    <view class="form-item">
                        <text class="label">性别</text>
                        <view class="gender-group">
                            <u-radio-group v-model="formData.gender" placement="row">
                                <u-radio 
                                    name="1" 
                                    label="男" 
                                    :customStyle="{ marginRight: '40rpx' }"
                                ></u-radio>
                                <u-radio 
                                    name="2" 
                                    label="女"
                                ></u-radio>
                            </u-radio-group>
                        </view>
                    </view>

                    <!-- 电话 -->
                    <view class="form-item">
                        <text class="label">电话</text>
                        <input class="input" v-model="formData.phone" placeholder="请输入电话" type="number" />
                    </view>

                    <!-- 住址 -->
                    <view class="form-item">
                        <text class="label">住址</text>
                        <input class="input" v-model="formData.address" placeholder="请输入住址" />
                    </view>
                </view>

                <!-- 提示文字 -->
                <view class="tips-text">
                    注:提交之后,会有工作人员尽快与您取得联系。请您耐心等待,避免重复多次提交
                </view>

                <!-- 提交按钮 -->
                <view class="submit-btn" @click="handleSubmit">
                    提交
                </view>
                <view class="look-btn" v-if="shStatus != null" @click="lookDetail">点击查看报名信息</view>
            </view>

        </scroll-view>

        <!-- 技能选择弹层 -->
        <u-popup :show="showSkillPicker" mode="bottom" round="16" :closeable="true" @close="showSkillPicker = false">
            <view class="skill-picker">
                <view class="picker-title">选择技能</view>
                <view class="skill-list">
                    <view 
                        class="skill-item" 
                        v-for="skill in skillList" 
                        :key="skill.id"
                        @click="selectSkill(skill)"
                    >
                        {{ skill.name }}
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
import { getCraftsmanSkillList, postCraftsmanApplicationSubmit, getCraftsmanApplicationStatus } from '@/api/index.js'
export default {
    data() {
        return {
            refresherTriggered: false,
            formData: {
                real_name: '',
                age: '',
                gender: '1',
                phone: '',
                address: ''
            },
            selectedSkill: '',
            selectedId:'',
            showSkillPicker: false,
            skillList: [],
            shStatus: null
        }
    },
    mounted() {
        this.getCraftsmanSkillListEvent()
        this.getCraftsmanApplicationStatusEvent()
    },
    methods: {
        init() {
            this.formData = {
                real_name: '',
                age: '',
                gender: '1',
                phone: '',
                address: '',
            }
        },
        async getCraftsmanApplicationStatusEvent() {
            const res = await getCraftsmanApplicationStatus()
            if (res.errno == 0) {
                this.shStatus = res.data.status
            }
        },
        async getCraftsmanSkillListEvent() {
            const res = await getCraftsmanSkillList()
            if (res.errno == 0) {
                this.skillList = res.data
            }
        },
        onRefresherRefresh() {
            if (this.refresherTriggered) return
            this.refresherTriggered = true
            
            // 模拟刷新数据
            this.init()
        },
        selectSkill(skill) {
            this.selectedSkill = skill.name
            this.selectedId = skill.id
            this.showSkillPicker = false
        },
        handleSubmit() {
            // 表单验证
            if (!this.selectedSkill) {
                uni.showToast({ title: '请选择技能', icon: 'none' })
                return
            }
            if (!this.formData.real_name) {
                uni.showToast({ title: '请输入姓名', icon: 'none' })
                return
            }
            if (!this.formData.age) {
                uni.showToast({ title: '请输入年龄', icon: 'none' })
                return
            }
            if (!this.formData.phone) {
                uni.showToast({ title: '请输入电话', icon: 'none' })
                return
            }
            if (!this.formData.address) {
                uni.showToast({ title: '请输入住址', icon: 'none' })
                return
            }

            // 提交表单
            const submitData = {
                skill_id: this.selectedId,
                ...this.formData
            }
            
            // uni.showToast({ title: '提交成功', icon: 'success' })
            
            // 这里可以调用API提交数据
            this.submitForm(submitData)
        },
        async submitForm(data) {
            const res = await postCraftsmanApplicationSubmit(data)
            
            if (res.errno == 0) {
                uni.showToast({ 
                    title: '提交成功',
                    icon: 'success',
                    success: () => {
                        this.init()
                        uni.navigateTo({
                            url: '/views/community/review'
                        })
                    }
                })
                return;
            }
            uni.showToast({ title: res.msg || '提交失败' })

        },
        lookDetail() {
            uni.navigateTo({
                url: '/views/community/registration-information'
            })
        }
    }
}
</script>
<style lang="scss" scoped>  
.jxt-container {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    
    .list {
        height: 100%;
        padding:0 20rpx;
        box-sizing: border-box;
    }
}

.sh-box {
    width: 100%;
    height: 100%;
    padding: 40rpx 0 0;
    box-sizing: border-box;
}

.tip {
    color: #333;
    text-align: center;
    font-size: 28rpx;
}

.look-btn {
    bottom: 28rpx;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    font-size: 28rpx;
    color: #0785CF;
}

.form-card {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
        border-bottom: none;
    }
}

.label {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.value {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.placeholder {
    font-size: 28rpx;
    color: #999;
}

.input {
    font-size: 28rpx;
    color: #333;
    text-align: right;
    flex: 1;
    max-width: 400rpx;
}

.gender-group {
    display: flex;
    align-items: center;
}

.tips-text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
    margin-bottom: 60rpx;
}

.submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4rpx 20rpx rgba(7, 133, 207, 0.3);
}

.skill-picker {
    padding: 40rpx 30rpx;
    max-height: 600rpx;
}

.picker-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
}

.skill-list {
    max-height: 500rpx;
    overflow-y: auto;
}

.skill-item {
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
        border-bottom: none;
    }
    
    &:active {
        background: #f8f8f8;
    }
}
</style>